import React, {useEffect, useState} from 'react'
import type {ColumnsType} from 'antd/es/table'
import {history, connect} from 'umi'
import {Select, Cascader, TreeSelect, Button, message} from 'antd'
import moment from 'moment'
import SearchForm from '@/components/SearchForm'
import {getCompany} from '@/service/common'
import {translateDataToTree} from '@/utils/common'
import CustomTable from '@/components/Table'
import {getFindHistoryListByDate} from '@/service/supplier/graderecord'

interface DataType {
	id: string
	supplierCode: string
	supplierName: string
	orgId: string
	serviceType: string
	contacts: string
	status: string
	supplierId: string
	date: string
}
const formItemLayout = {
	labelCol: {flex: '100px'},
	wrapperCol: {flex: '1'},
}

const fieldNames = {
	label: 'name',
	value: 'id',
	id: 'id',
	pId: 'parentId',
}

const grade = (props: {
	user: {orgId: string | number}
	data: any
	dictData: any
	supplierTypeData: any
}) => {
	const {data, dictData, supplierTypeData} = props
	const [companyData, setCompanyData] = useState([])
	const [searchData, setSearchData] = useState({})
	const [loading, setLoading] = useState(false)
	const [total, setTotal] = useState()
	const [dataSource, setDataSource] = useState([])
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})

	// 获取公司列表
	const onCompany = () => {
		getCompany({merchantId: props.user.orgId}).then((res: any) => {
			const list = translateDataToTree(res.data)
			setCompanyData(list as any)
		})
	}
	useEffect(() => {
		onCompany()
	}, [props.user.orgId])

	// 获取历史评级列表
	const getData = () => {
		setLoading(true)
		getFindHistoryListByDate({
			...params,
			...searchData,
			supplierId: data?.id,
		})
			.then((res: any) => {
				if (res?.success) {
					setDataSource(res?.data?.records)
					setTotal(res?.data?.total)
					setLoading(false)
				}
			})
			.catch((err: any) => {
				setDataSource([])
				message.error(err)
				setLoading(false)
			})
	}
	useEffect(() => {
		getData()
	}, [params])

	const columns: ColumnsType<DataType> = [
		{
			title: '供应商编号',
			dataIndex: 'supplierCode',
			align: 'center',
			render: () => data?.supplierCode,
			width: 120,
		},
		{
			title: '供应商名称',
			dataIndex: 'supplierName',
			align: 'center',
			render: () => data?.supplierName,
			width: 120,
		},
		{
			title: '供应商所属公司',
			dataIndex: 'orgId',
			align: 'center',
			width: 120,
			render: () => (
				<>
					{data?.orgId ? (
						<TreeSelect
							value={data?.orgId?.split(',') || []}
							disabled
							multiple
							showCheckedStrategy="SHOW_ALL"
							dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
							treeDefaultExpandAll
							fieldNames={fieldNames}
							treeDataSimpleMode
							treeData={companyData}
						/>
					) : (
						'-'
					)}
				</>
			),
		},
		{
			title: '供应商类型',
			dataIndex: 'serviceType',
			align: 'center',
			width: 120,
			render: (text) => (
				<Cascader
					disabled
					value={text.split(',')}
					options={supplierTypeData}
				/>
			),
		},
		{
			title: '评级时间',
			dataIndex: 'reviewTime',
			align: 'center',
			width: 120,
			render: (text) => moment(text).format('YYYY-MM-DD'),
		},
		{
			title: '供应商状态',
			dataIndex: 'status',
			align: 'center',
			width: 120,
			render: (text) => <>{text === 1 ? '启用' : '禁用'}</>,
		},
		{
			title: '供应商综合评分',
			dataIndex: 'score',
			align: 'center',
			width: 140,
		},
		{
			title: '供应商评级',
			dataIndex: 'scoreGrade',
			align: 'center',
			width: 120,
			render: (text) => (
				<Select
					value={text}
					disabled
					fieldNames={{value: 'dictKey', label: 'dictValue'}}
					options={dictData?.Supplier_Rating}
				/>
			),
		},
		{
			title: '操作',
			key: 'action',
			align: 'center',
			width: 100,
			fixed: 'right',
			render: (text: any, record) => (
				<Button
					type="link"
					onClick={() => {
						history.push({
							pathname: `/supplier/grades/details`,
							query: {
								id: record?.supplierId,
							},
						})
					}}>
					{' '}
					详情
				</Button>
			),
		},
	]
	const formItems: any[] = [
		{
			type: 'group',
			key: 'group1',
			groupItems: [
				{
					type: 'time',
					subtype: 'date',
					label: '评级时间',
					name: 'reviewTime',
					key: 'reviewTime',
				},
				{},
				{},
			],
		},
	]

	const onFinish = (value: any) => {
		setSearchData({date: moment(value?.reviewTime).format('YYYY-MM-DD')})
		setParams({
			current: 1,
			size: 10,
		})
	}
	const onReset = () => {
		setSearchData({})
		setParams({
			current: 1,
			size: 10,
		})
	}
	return (
		<div>
			<SearchForm
				onFinish={onFinish}
				onReset={onReset}
				formItems={formItems}
				formLayout={formItemLayout}
				style={{marginBottom: '12px'}}
			/>
			<CustomTable
				params={params}
				columns={columns}
				total={total}
				pagination
				callback={(pagination: any) => {
					setParams(pagination)
				}}
				loading={loading}
				dataSource={dataSource}
			/>
		</div>
	)
}
export default connect(({user}: any) => ({user}))(grade)
